<template>
	<view class="loading-box" :style="{ background: readTheme.mainBackground}">
		<u-loading mode="circle"></u-loading>
		<text>{{ loadingText }}</text>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		props: {
			loadingText: {
				type: String,
				default: '加载中'
			}
		},
		computed: {
			...mapState({
				iStatusBarHeight: state => state.global.iStatusBarHeight
			}),
			...mapGetters({
				readTheme: 'readTheme'
			})
		},
	}
</script>

<style>
	.loading-box {
		height: 100vh;
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
